﻿@page "/Test"
@using CardMaker.Library.Services
@using Microsoft.JSInterop
@using CardMaker.Library.Models
@inject ICardTemplateService _cardTemplateService
@inject ISideImageStorage _sideImageStorage
@inject ICardTemplateStorage _cardTemplateStorage
@inject IJSRuntime _jsRuntime
@inject ICardImageToUrlService _cardImageToUrlService
@inject IFrameImageStorage _frameImageStorage
@inject ICreateCardService _createCardService
@if (_isLoading)
{
    <h1><Spinner></Spinner></h1>
}
else
{   
        <ListView TItem="JSideImage" Items="@jSideImage">
        <HeaderTemplate>
            <div>JSideImage</div>
            <img src="@frameImg"/>
        </HeaderTemplate>
        <BodyTemplate>
            <Card>
                <BodyTemplate>
                    <div class="lv-demo-desc">副图名 @context.SideImageName</div>
                    <div class="lv-demo-desc">缩放比 @context.Scale</div>
                    <div class="lv-demo-desc">
                        位置 @context.SideImagePosition[0]
                        , @context.SideImagePosition[1]
                    </div>
                    <div>@context.SideImageKeXuan.Count</div>
                    @if (@context.SideImageKeXuan != null) {
                        for (var i = 0; i < @context.SideImageKeXuan.Count; i++) {
                            <div class="lv-demo-desc">可选项 @context.SideImageKeXuan[i]</div>
                            <img src="@context.SideKeXuanImageUrls[i]"/>
                        }
                    }
                </BodyTemplate>
            </Card>
        </BodyTemplate>
        <FooterTemplate>
            <div class="text-end">
                Copyright Bootstrap Blazor
            </div>
        </FooterTemplate>
    </ListView>
}